<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
const goToModule = (name: string) => {
  // @ts-ignore
  router.push(name);
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header height="100px" class="header">Header</el-header>
      <el-main class="main">
        <el-button type="primary" @click="goToModule('table')"
          >去表格</el-button
        >
        <el-button type="primary" @click="goToModule('module')"
          >去模块1</el-button
        >
        <el-button type="primary" @click="goToModule('module1')"
          >去模块2</el-button
        >
        <el-button type="primary" @click="goToModule('table1')"
          >去表格1</el-button
        >
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.header {
  line-height: 100px;
  background-color: black;
  color: yellow;
}
.main {
  height: calc(100vh - 100px);
  background: grey;
}
</style>
